<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/weui.css">
	<!-- <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/example.css"> -->
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<style type="text/css">
		.page, body {
		    background-color: #FBF9FE;
		}
		.hd {
		    padding: 2em 0;
		}
		.page.button .page_title, .page.cell .page_title {
		    color: #225FBA;
		}
		.page_title {
		    text-align: center;
		    font-size: 34px;
		    color: #3CC51F;
		    font-weight: 400;
		    margin: 0 15%;
		}
		.page .bd {
		    padding-bottom: 30px;
		}
		.weui_toast_content {
		    margin: 0 auto;
		    padding: 2.8em 0;
		}
	</style>
</head>
<body ontouchstart>
    <div class="page">
	    <div class="hd">
	        <h1 class="page_title">卡号绑定</h1>
	    </div>
	    <div class="bd">
	        
	        <div class="weui_cells_title">输入想要绑定的卡号，一行一个</div>
	        <div class="weui_cells weui_cells_form">
	            <div class="weui_cell">
	                <div class="weui_cell_bd weui_cell_primary">
	                    <textarea class="weui_textarea" id="cards"></textarea>
	                </div>
	            </div>
	        </div>

	        <div class="weui_btn_area">
	            <a class="weui_btn weui_btn_primary" href="javascript:bind_card_post();">批量绑定</a>
	        </div>

	        <div class="weui_cells_title">已绑定的卡号列表</div>
	        <div class="weui_cells weui_cells_access bind_list">
	        	<!-- 已绑定的卡号列表 -->
            </div>
            <div class="weui_dialog_confirm" id="delete_dialog" style="display: none;">
	            <div class="weui_mask"></div>
	            <div class="weui_dialog">
	                <div class="weui_dialog_hd"><strong class="weui_dialog_title">是否确定取消推送</strong></div>
	                <div class="weui_dialog_bd">需要解绑的卡号：<br><span class="card_number"></span></div>
	                <div class="weui_dialog_ft">
	                    <a href="javascript:;" class="weui_btn_dialog default">取消</a>
	                    <a href="javascript:;" class="weui_btn_dialog warn" style="color: #E64340;">确定</a>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>
	<div id="toast" style="display: none;">
        <div class="weui_mask_transparent"></div>
        <div class="weui_toast">
            <p class="weui_toast_content">{{msg}}</p>
        </div>
    </div>
	<script type="text/html" id="ul_tpl">
		<a class="weui_cell bind_card" href="javascript:;">
		    <div class="weui_cell_bd weui_cell_primary">
		        <p class="card_number">{{number}}</p>
		    </div>
		    <div class="weui_cell_ft">
		    </div>
		</a>
	</script>
	<script src="__PUBLIC__/js/zepto.js"></script>
	<script type="text/javascript">
		function show_msg(msg){
	        $('.weui_toast_content').text(msg);
	        $('#toast').show();
	        setTimeout(function () {
	            $('#toast').hide();
	        }, 2000);
		}

		function bind_card_post(){
			var cards = $('#cards').val();
			$.post('/index.php?g=Api&m=Wxnotify&a=bind_card_post',{cards:cards},function(res){
				if (res.code) {
					$('#cards').val('');
					refresh_bind_list();
				}else{
					show_msg(res.msg);
				}
			},'json');
		}

		function refresh_bind_list(){
			$('.bind_list').html('');
			$.post('/index.php?g=Api&m=Wxnotify&a=bind_list',{},function(res){
				if (res.code) {
					for (var i in res.data) {
						var tpl = $('#ul_tpl').html();
						tpl = tpl.replace('{{number}}',res.data[i].card_number);
						$('.bind_list').append(tpl);
					}
				}else{
					show_msg(res.msg);
				}
			},'json');
		}
		refresh_bind_list();
		$('.bind_list').delegate('.bind_card','click',function(){
			var t = $(this);
			var card = t.find('.card_number').text();
			$('#delete_dialog .card_number').text(card);
	        $('#delete_dialog').show();
	        $('#delete_dialog').find('.weui_btn_dialog').on('click', function () {
	            $('#delete_dialog').hide();
	        });
	        $('#delete_dialog a.warn').click(function(){
	        	$.post('/index.php?g=Api&m=Wxnotify&a=unbind_card',{card_number:card},function(res){
	        		if (res.code) {
						refresh_bind_list();
	        		}else{
						show_msg(res.msg);
					}
	        	},'json');
	        });
		})
	</script>
</body>
</html>